<template>
	<!-- 新品上市，立即抢购页面 -->
	<view class="content">
		<!-- 商品列表 -->
		<view class="nowproducts">
			<view v-for="(item,index) of shooplist" :key="index" class="nowproducts_list">
				<view class="nowproducts_list_img">
					<image mode="widthFix" :src="shoopimg[index].pics_big"></image>
				</view>
				<view class="nowproducts_list_content">
					<text class="nowproducts_list_content_title">{{item.goods_name}}</text>
					<view class="nowproducts_list_content_price">
						<text class="nowproducts_list_price_new">￥{{item.goods_price}}</text>
						<text class="nowproducts_list_price_old">￥{{item.goods_price+100}}</text>
					</view>
					<view class="nowproducts_list_nowpreoducts">
						<text class="nowproducts_list_qiang" @click="particulars(item.goods_id)">马上抢</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				shooplist:[],
				shoopimg:[]
			}
		},
		onLoad(title) {
			// console.log(title)
			this.settab(title.title)
		},
		methods:{
			// 动态渲染nav
			settab(title){
				uni.setNavigationBarTitle({
					title:title,
					success:()=>{
						if(title=='新品上架'){
							this.getshooplist('水果')
						}else if(title=='常买商品'){
							this.getshooplist('T恤')
						}else if(title=='平台精选'){
							this.getshooplist('飞利浦')
						}else if(title=='为您推荐'){
							this.getshooplist('小米')
						}else if(title=='特价商品'){
							this.getshooplist('咖啡')
						}
					}
				})
			},
			// 获取商品列表
			getshooplist(query){
				uni.request({
					url:"http://localhost:3001/goods_title",
					data:{
						query:query
					},
					method:"GET",
					success: (res) => {
						this.shooplist=res.data.data
						this.getshoopimg(res.data.data)
						// console.log(this.shooplist)
					}
				})
			},
			// 获取商品列表的图片地址
			getshoopimg(shooplist){
				if(shooplist.length){
					var imgobj=[]
					shooplist.forEach(item=>{
						uni.request({
							url:"http://localhost:3001/goods_img",
							data:{id:item.goods_id},
							method:"GET",
							success: (res) => {
								imgobj.push(res.data.data[0])
							}
						})
					})
					this.shoopimg=imgobj
					// console.log(this.shoopimg)
				}
			},
			// 点击商品,进入详情页面
			particulars(item){
				uni.navigateTo({
					url:"../../pages/particulars/particulars?item="+item
				})
			}
		}
	}
</script>

<style>
	page{
		width: 750rpx;
		height: 100%;
		background-color: #F3F3F3;
		box-sizing: border-box;
	}
	image{
		width: 100%;
		display: block;
	}
	.content{
		padding: 20rpx;
	}
	
	.nowproducts_list{
		display: flex;
		/* align-items: center; */
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.nowproducts_list_img{
		width: 170rpx;
		margin-right: 14rpx;
	}
	.nowproducts_list_content{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.nowproducts_list_content_title{
		font-size: 20rpx;
		color: #000000;
	}
	.nowproducts_list_price_new{
		font-size: 22rpx;
		color: red;
		margin-right: 10rpx;
	}
	.nowproducts_list_price_old{
		font-size: 18rpx;
		color: #999;
		text-decoration: line-through;
	}
	.nowproducts_list_nowpreoducts{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.nowproducts_list_qiang{
		border: 2rpx solid #f05c73;
		padding:8rpx 14rpx ;
		font-size: 20rpx;
		color: #f05c73;
		border-radius: 50rpx;
	}
</style>
